<template>
    <a-form layout="inline">
        <a-form-item>
            <a-input v-model:value="bookName" placeholder="请输入书名搜索" allow-clear>
            </a-input>
        </a-form-item>
        <a-form-item>
            <a-button type="primary" @click="search">
                搜索
            </a-button>
            <a-button type="primary" @click="refresh" style="margin-left:20px">
                数据抓取
            </a-button>
        </a-form-item>
    </a-form>
    <br/>
    <a-table :columns="columns" :data-source="bookList" rowKey="url" style="height:100%">
        <template #bodyCell="{ column, record }">
            <!-- 排行 -->
            <template v-if="column.key === 'rankNum'">
                <a-input type="number" style="width:80px" v-model:value="record.rankNum"
                    @blur="changeRankNum($event,record)"></a-input>
            </template>
            <!-- 上架、下架 -->
            <template v-if="column.key === 'isDelete'">
                <a-select v-model:value="record.isDelete" @change="changeIsDelte($event,record)">
                    <a-select-option value="0">上架</a-select-option>
                    <a-select-option value="1">下架</a-select-option>
                </a-select>
            </template>
        </template>
    </a-table>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { getBookList, updateBook ,getBook81} from "@/api";
import { message,Modal } from "ant-design-vue";

onMounted(() => {
    getList();
});
const bookList = ref([]);
const columns = ref([
    {
        title: "书名",
        dataIndex: "bookName",
        key: "bookName",
        width:250
    },
    {
        title: "作者",
        dataIndex: "author",
        key: "author",
    },
    {
        title: "分类",
        dataIndex: "category",
        key: "category",
    },
    {
        title: "状态",
        dataIndex: "status",
        key: "status",
    },
    {
        title: "更新时间",
        dataIndex: "updateTime",
        key: "updateTime",
    },
    {
        title: "排行",
        dataIndex: "rankNum",
        key: "rankNum",
    },
    {
        title: "管理",
        dataIndex: "isDelete",
        key: "isDelete",
    },
]);
async function getList() {
    const res = await getBookList();
    if (res.status === 200) {
        bookList.value = res.data;
    }
}
async function changeRankNum(e, r) {
    console.log(e, r);
    let param = {
        url: r.url,
        rankNum: r.rankNum,
    };
    let res = await updateBook(param);
    console.log(res);
    if (res.data.code == 200) {
        message.success(res.data.msg);
        getList();
    }
}
async function changeIsDelte(e, r) {
    console.log(e, r);
    let param = {
        url: r.url,
        isDelete: e,
    };
    let res = await updateBook(param);
    console.log(res);
    if (res.data.code == 200) {
        message.success(res.data.msg);
        getList();
    }
}
const bookName = ref("");
async function search() {
    let param = { bookName: bookName.value };
    const res = await getBookList(param);
    if (res.status === 200) {
        bookList.value = res.data;
    }
}
async function refresh(){
    Modal.confirm({
            title: "提示",
            content: `你确定要重新抓取数据吗？`,
            cancelText: "取消",
            okText: "确认",
            onOk() {
                getBook81().then(res=>{
                    console.log(res);
                    if (res.status === 200) {
                        message.success('开始抓取数据')
                    }
                })
            },
        });
}
</script>

<style>
</style>